<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<meta name="viewport" content="width=device-width, 2.initial-scale=1.0, 3.maximum-scale=1.0, 4.user-scalable=no">-->
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/curriculum.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
    <script src="__JS__/jquery-1.11.3.js"></script>
    <script src="__JS__/bootstrap.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/4.2.0/css/font-awesome.css">
    <link rel="stylesheet" href="__PUBLIC__/4.2.0/css/font-awesome-ie7.min.css">
    <link rel="stylesheet" href="__CSS__/button.css">
</head>
<body>
<div class="container"style="background-color: black">
    <div class="row"  style="padding: 1rem;">
        <div class="col-xs-12" >
            <a href="{:url('Index/index')}"  style="font-size: 1rem;color:white;">
                <span style="font-size: 1rem"class="glyphicon glyphicon-tint"></span>在线学习
            </a>

        </div>
    </div>
</div>

<!--头部结束-->




<div class="container" id="listWrapper">
    <div class="row">
        <div class="col-xs-4">
            <button style="color: #b7b6b9;"  onclick="javascript:history.go(-1)" class="button button-large button-plain button-border button-circle"><i class="fa fa-reply"></i></button>
        </div>

    </div>
            {volist name='list' id='vo'}
               <div class="container">
            <div class="row" title="{$vo.id}">
                <p class="col-xs-6" style="color: #929292;">
                {$vo.name}</p>
            </div>

                   {volist name='$vo.class' id='va'}
                <div class="active col-xs-4 " style="padding: 0.5rem;" title="{$va.id}"><a class="btn btn-danger"                           href="{:url('Curriculum/course')}?category={$va.record_name}">{$va.record_name}</a></div>
                   {/volist}

                </div>
            {/volist}
</div>

<!--这里遍历课程-->
    <!--<div class="container-fluid" style="background-color: rgba(236, 236, 236, 0.4); margin-top: 20px">-->
        <!--<div class="container">-->
            <!--<div class="row" id="box1">-->
                <!--{empty name="oth"}-->
                    <!--<div class="col-sm-3  img-rounded div1">-->
                    <!--<h1>没有更多课程</h1>-->
                    <!--</div>-->
                <!--{else /}-->
                    <!--{volist name='oth' id='vo'}-->
                    <!--<a href="{:url('Chapter/chaptershow')}?id={$vo.id}">-->
                        <!--<div class="col-sm-3  img-rounded div1">-->
                            <!--<p class="btn">{$vo.category}</p>-->
                            <!--<p>{$vo.record_name}</p>-->
                            <!--<p>{$vo.introduce}</p>-->
                            <!--<p>难度：{$vo.difficulty}</p>-->
                            <!--<p>售价：￥{$vo.charge}</p>-->
                        <!--</div>-->
                    <!--</a>-->
                    <!--{/volist}-->
                <!--{/empty}-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--这里遍历课程结束-->
</body>
</html>
<!--组件依赖 Zepto 或 jQuery-->
<script src="__JS__/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/pull-master/dist/pull.min.js"></script>
<script>
    $(function(){
        $('.div1').mouseover(function(){
            $(this).css("backgroundColor","white");
        })
        $('.div1').mouseout(function(){
            $(this).css("backgroundColor","rgba(183, 183, 183, 0.14)");
        })
    })
</script>
<script>
var ajaxurl="{:url('Curriculum/ajaxurl')}";
var href="{:url('Curriculum/course')}";
    var $listWrapper = $('#listWrapper');

    var pullInstance = new Pull($listWrapper, {
        distance: 60,
        onPullDown: function () {
            setTimeout(function () {
                $.ajax({
                    url:ajaxurl,
                    type:"post",
                    dataType:"json",
                    data:null,
                    success:function (data) {
                        handlePullDownSuccess(data);//成功函数
                    },
                    error:function (e) {
                        handlePullDownFailed();
                        alert("服务器出错了："+e.response)
                    }

                })




//                Math.round(Math.random() + 0.2) ? handlePullDownSuccess() : handlePullDownFailed();
            }, 1000);
        },

        // 自定义下拉刷新dom，支持与默认模板混用，如果只配置某一项，其余则使用默认模板
        pullDownDom: {
            start: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>下拉可刷新</span></p></div></div>', // 下拉刷新前的html
            drop: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>释放可刷新</span></p></div></div>', // 下拉刷新触发提示的html
            loading: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading i-loading2"></i><span>刷新中...</span></p></div></div>', // 下拉刷新中的html
            success: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingSucc"></i><span>刷新成功</span></p></div></div>', // 下拉刷新成功的html
            failed: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingFailed"></i><span>未加载成功，稍后再试吧</span></p></div></div>', // 下拉刷新失败的html
        },

//        onPullUp: function () {
//            setTimeout(function () {
//                Math.round(Math.random() + 0.2) ? handlePullUpSuccess() : handlePullUpFailed();
//
//            }, 2000);
//        },


    });

    var pullDownTotal = 0,
        pullUpTotal = 0;

    // 创建li dom
    function createList(str) {
        return '<li class="list-group-item">'+ str +'</li>';
    }

    // 处理下拉刷新成功
    function handlePullDownSuccess(data) {
            var tagname="";
     for(var a=0;a< Object.keys(data).length;a++){
         tagname+='<div class="container">'+
             '<div class="row" title="'+ data[a]["name"]+'">'+
             '<p class="col-xs-6" style="color: #929292;">'+
             data[a]["name"]+'</p>'+
         '</div>';

         for (var b=0;b< data[a]["class"].length;b++){
             tagname+='<div class="active col-xs-4 " style="padding: 0.5rem;" title="'+data[a]["class"][b]["id"]+'"><a class="btn btn-danger"                           href="'+href+'?category='+data[a]["class"][b]["record_name"]+'">'+data[a]["class"][b]["record_name"]+'</a></div>';
         }
         tagname+="</div>";
     }
        $("#listWrapper").empty();
            $("#listWrapper").append(tagname);
        pullInstance.pullDownSuccess();
    }

    // 处理下拉刷新失败
    function handlePullDownFailed() {
        pullInstance.pullDownFailed();
    }

    // 处理上拉加载成功
    function handlePullUpSuccess() {
        var count = Math.round(Math.random()*10),
            htmlArr = [];

        while(count){
            count--;
            htmlArr.push(createList('item pullUp ' + pullUpTotal));
            pullUpTotal++;
        }

        $listWrapper.append(htmlArr.join(''));

        if(pullUpTotal >= 20){
            pullInstance.pullUpDone();
        }else{
            pullInstance.pullUpSuccess();
        }
    }

    // 处理上拉加载失败
    function handlePullUpFailed() {
        pullInstance.pullUpFailed();
    }

    var videourl="{:url('Chapter/video')}"
    function video(fileid) {
//        alert(fileid
        $.ajax({
            url:videourl,
            type:"post",
            dataType:"json",
            data:{
                fileid:fileid
            },
            success:function (data) {
                alert(data.url);
                $("#video").attr("src","/thinkphp_5.0.9_full/public/20170719/31f9c6852cbc63d0f4102ac26f8bae01.MP4");
            },
            error:function(e){
                alert("视频播放出错 ".e.response)
            }
        })
    }
    function show(logoid,id) {
        if( $("#"+logoid).attr("class")=="glyphicon glyphicon-eye-close"){
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-open")
        }else{
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-close")
        }
//        alert(123)
        if( $("#"+id).css("display")=="block"){
            $("#"+id).css("display","none")
        }else{
//           alert($("#"+id));
            $("#"+id).css("display","block")
        }
    }

    var myVideo=document.getElementById("my-video");
    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    };

    $(function(){
        $(".div1").mouseover(function(){
            $(this).css("backgroundColor","white");
        });
        $('.div1').mouseout(function(){
            $(this).css("backgroundColor","rgba(183, 183, 183, 0.14)");
        })
    })

</script>
